let loaderUtils = require('loader-utils')

/* 
source less-loader编译后的内容
*/
function loader(source) {
  //1.less-loader转成css时
  //   console.log('this.data.name', this.data.name)
  //   let script = `
  //         let style = document.createElement('style');
  //         style.innerHTML = ${JSON.stringify(source)};
  //         document.head.appendChild(style)
  //         module.exports = ''// 这个导出可有可无
  //     `
  //   return script
}
// 2.less-loader 转换成脚本时,style-loader要这样处理
loader.pitch = function (remainingRequest, previousRequest, data) {
  console.log('remainingRequest', remainingRequest) //D:\coding\webpack\05home\loaders\less-loader.js!D:\coding\webpack\05home\src\index.less 当前loader之后的路径
  console.log('previousRequest', previousRequest) //"" 当前loader之前的路径
  console.log('data', data) //{} data：pitch中的自定义变量,定义后可在自己的loader函数中使用
  data.name = 'zhangbo'
  console.log(
    '${loaderUtils.stringifyRequest(this,"!!"+remainingRequest)}',
    loaderUtils.stringifyRequest(this, '!!' + remainingRequest),
  )
  let script = `
          let style = document.createElement('style');
          style.innerHTML = require(${loaderUtils.stringifyRequest(
            this,
            '!!' + remainingRequest,
          )});
          document.head.appendChild(style)
          module.exports = ''// 这个导出可有可无
      `
  //这个返回的JS脚本给了webpack了
  //把这个JS脚本转成AST抽象语法树,分析里的require依赖 此时学习时觉得是loader-runner对语法树进行了编译
  //stringifyRequest 把绝对路径转成相对路径 !!../loaders/less-loader.js!./index.less
  //   相对于根目录的路径 类似于此模块的ID
  //   !!./loaders/less-loader.js!./src/index.less
  //   loader执行完后会把下面的代码给webpack
  //  let style = document.createElement('style');
  //     style.innerHTML = require("!!./loaders/less-loader.js!./src/index.less");
  //     document.head.appendChild(style);
  //     webpack会去分析依赖
  //!!的前缀代表只要行内或者说是内联,不要前置后置和普通
  return script
}
module.exports = loader
